<template>
  <!-- 复选 -->
  <div class="model">
    <div style="padding: 10px; display: flex">
      <div class="title">
        <el-tooltip placement="top">
          <template #content>
            <div style="font-size: 16px" v-html="contentType"></div>
          </template>
          <span>文章分类</span>
        </el-tooltip>
      </div>
      <div class="box" style="max-height:100px;overflow-y:auto">
        <el-tag
          type="primary"
          effect="plain"
          v-for="type of props.dataList"
          :key="type.id"
          class="type"
          @click="chooseType(type.id)"
          :class="{ active: type.id === blog.type ? true : false }"
        >
          {{ type.name }}
        </el-tag>
      </div>
    </div>
    <div style="padding: 10px; display: flex">
      <div class="title">
        <el-tooltip placement="top">
          <template #content>
            <div style="font-size: 16px" v-html="firstPicture"></div>
          </template>
          <span>文章封面</span>
        </el-tooltip>
      </div>
      <div>
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :on-change="handlerFirstPicture"
          :file-list="fileList"
          :auto-upload="false"
          list-type="picture-card"
          style="
            width: 150px;
            height: 150px;
            background: #eee;
            line-height: 150px;
            text-align: center;
            border-radius: 5px;
          "
        >
          <img
            v-if="filePath!==''"
            :src="filePath"
            class="avatar"
            style="width: 300px; height: 150px;margin-left:125px"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="首图" style="width: 500px" />
        </el-dialog>
      </div>
    </div>
    <div style="padding: 10px; display: flex">
      <div class="title">
        <el-tooltip placement="top">
          <template #content>
            <div style="font-size: 16px" v-html="contentTag"></div>
          </template>
          <span>文章标签</span>
        </el-tooltip>
      </div>
      <div class="box" style="max-height:100px;overflow-y:auto">
        <el-tag
          class="type"
          effect="plain"
          v-for="tag in props.tagList"
          :key="tag.id"
          :disable-transitions="false"
          @click="chooseTag(tag.name)"
          :class="{ active: tags.indexOf(tag.name) === -1 ? false : true }"
        >
          {{ tag.name }}
        </el-tag>
      </div>
    </div>
    <div style="padding: 10px; display: flex">
      <div class="title">
        <el-tooltip placement="top">
          <template #content>
            <div style="font-size: 16px" v-html="contentModel"></div>
          </template>
          <span>文章类型</span>
        </el-tooltip>
      </div>
      <div class="box">
        <el-radio-group v-model="blog.model">
          <el-radio :value="0">原创</el-radio>
          <el-radio :value="1">转载</el-radio>
          <el-radio :value="2">翻译</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div style="padding: 10px; display: flex">
      <div class="title">
        <el-tooltip placement="top">
          <template #content>
            <div style="font-size: 16px" v-html="contentModel"></div>
          </template>
          <span>是否开启评论</span>
        </el-tooltip>
      </div>
      <div class="box">
        <el-radio-group v-model="blog.review">
          <el-radio :value="0">否</el-radio>
          <el-radio :value="1">是</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div style="padding: 10px; display: flex">
      <div class="title">
        <el-tooltip placement="top">
          <template #content>
            <div style="font-size: 16px" v-html="contentDescription"></div>
          </template>
          <span>文章摘要</span>
        </el-tooltip>
      </div>
      <div class="box" style="display: flex">
        <el-input
          v-model="blog.description"
          maxlength="246"
          placeholder="摘要：会在推荐、列表等情景外露，帮助读者快速了解内容，支持一键提取正文前246字符键入摘要文本框"
          show-word-limit
          style="width: 80%"
          :autosize="{ minRows: 2, maxRows: 5 }"
          type="textarea"
        >
        </el-input>
        <el-button style="margin-left: 20px" @click="extract">一键提取</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import markconfig from '@/util/markconfig'
import { marked } from 'marked'
import { Plus } from '@element-plus/icons-vue'
import { computed, ref, watch } from 'vue'
import { ElNotification } from 'element-plus'

const props = defineProps({
  dataList: {
    type: Array,
    default: null
  },
  content: {
    type: Object,
    default: null
  },
  tagList: {
    type: Array,
    default: null
  },
  update: {
    type: Object,
    default: null
  }
})
const tags = ref([])
const filePath = ref('')

const blog = ref({
  description: '',
  firstPicture: '',
  type: null,
  tag: '',
  model: 0,
  review: 1,
  fileObj:null
})

watch(
  () => props.update,
  (newVal, oldVal) => {
    console.log('执行了')
    console.log('获取的数据', props.update)

    if (newVal !== null && newVal !== undefined) {
      blog.value.firstPicture = props.update.firstPicture
      blog.value.description = props.update.description
      blog.value.model = props.update.model
      blog.value.type = props.update.typeId
      blog.value.review = props.update.isReview
      tags.value = props.update.tagsId.split(',')
      blog.value.tag = props.update.tagsId
    }

    console.log(blog.value)
  }
)

const contentType = computed(() => marked.parse(markconfig.contentType))
const contentModel = computed(() => marked.parse(markconfig.contentModel))
const contentTag = computed(() => marked.parse(markconfig.contentTag))
const firstPicture = computed(() => marked.parse(markconfig.firstPicture))
const contentDescription = computed(() => marked.parse(markconfig.contentDescription))

const dialogImageUrl = ref('')
const dialogVisible = ref(false)


const handlerFirstPicture = (file,fileList) => {
    console.log('----',file,fileList);
    blog.value.fileObj = file.raw
    // 创建fileReader读取文件
    const reader = new FileReader()
    reader.readAsDataURL(blog.value.fileObj);
    reader.onload = (e) => {  
        filePath.value = e.target.result;  
    };
}

const chooseType = (id) => {
  blog.value.type = id
}
const chooseTag = (name) => {
  if (tags.value.indexOf(name) === -1) {
    if (tags.value.length >= 5) {
      ElNotification.warning('抱歉，标签最多选择5个')
      return
    }
    tags.value.push(name)
  } else {
    tags.value.splice(tags.value.indexOf(name), 1)
  }
  blog.value.tag = tags.value.join(',')
  console.log('tags--->', tags.value, blog.value.tag)
}

const extract = () => {

  var cont = marked.parse(props.content.content)

  // 使用正则表达式去除特殊符号
  // 使用正则表达式去除特殊符号，但保留汉字、字母、数字、空格和常见标点符号
  const noSpecialChars = cont.replace(
    /[^\u4e00-\u9fa5\w\s.,!?；：、（）《》【】‘’“”‘’“”‘’“”‘’“”]+/g,
    ''
  )

  // 使用DOMParser去除HTML标签
  const parser = new DOMParser()
  const doc = parser.parseFromString(noSpecialChars, 'text/html')
  const textContent = doc.body.textContent || doc.body.innerText || ''
  console.log('出来了', textContent)

  blog.value.description = textContent.trim().substring(0,246) // 去除可能的前后空格
}

const getData = () => {
  setTimeout(() => {
    blog.value = {
      description: '',
      firstPicture: '',
      type: null,
      tag: '',
      model: 0,
      review: 1,
      fileObj:null
    }
    filePath.value = ''
    tags.value = []
  }, 1500)
  return blog.value
}

defineExpose({
  getData
})
</script>

<style scoped>
.model {
  width: 80%;
  margin-left: 10%;
  background: #fff;
  min-height: 100px;
  margin-top: 20px;
  margin-bottom: 100px;
}

.type {
  margin: 0 10px 10px 10px;
}

.title {
  width: 130px;
  text-align: right;
  padding-right: 15px;
  color: #6c6c6c;
}

.box {
  width: 85%;
  flex-wrap: wrap;
}

.type:hover {
  cursor: pointer;
}

.active {
  border: 1px solid #ff4d00;
  color: #ff4d00;
}
</style>
